<!DOCTYPE html>

<!-- 
	HTML引入css文件（四种方法）
	https://blog.csdn.net/m0_63569670/article/details/127759012
	
	关于html引入css文件后没有效果问题
	https://blog.csdn.net/qq_57408330/article/details/128978102
	
	
	超全面H5页面适配之「viewport」
	https://zhuanlan.zhihu.com/p/425121653
	
	
	HTML5开发手机应用-详细介绍viewport的作用
	https://m.php.cn/faq/357894.html
	
	
	关于 <meta name="viewport" content="width=device-width, initial-scale=1.0">的解释
	https://blog.csdn.net/tashanhongye/article/details/50197807
	
	width - viewport的宽度
	height - viewport的高度
	initial-scale - 初始的缩放比例
	minimum-scale - 允许用户缩放到的最小比例
	maximum-scale - 允许用户缩放到的最大比例
	user-scalable - 用户是否可以手动缩放
	
	viewport 语法介绍：
	 
	 <meta name="viewport"
		 content="
			 height = [pixel_value | device-height] ,
			 width = [pixel_value | device-width ] ,
			 initial-scale = float_value ,
			 minimum-scale = float_value ,
			 maximum-scale = float_value ,
			 user-scalable = [yes | no] ,
			 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
		 "
		 />
	     
	
 -->
 
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title></title>
		<!-- <link type="text/css" href="../css/testCss01.css" />  这种方式引入CSS文件后没有生效 -->
		<link rel="stylesheet" href="../css/testCss01.css" />
	</head>
	<body>
		<div>
			<h2>标题1</h2>
			<p>
				BODY标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这里我写了一段文字，它就会在浏览器里显示出来。这些就构成了我们网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。
			</p>
			<br />
			<img src="../images/baidu.png"/>
		</div>
		
		<div>
			<p class="p1">类选择器<br />
				格式：.类名{  样式属性:值  }  （style样式中）
<br />
				标签必须有class属性  （标签中class='属性值'）

				class在标签中可多次使用
			</p>
		</div>
		
		<div>
			<p id="p2"> id选择器
				格式：#id{  样式属性:值  }  （style样式中）

				标签必须有id属性  （标签中id='属性值'）

				id在标签中只可以使用一次
			</p>
		</div>
	</body>
</html>